<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>chatHistory</title>
</head>
<body>
<!-- 聊天历史页面 -->
<!--
参数说明：
    @param status: Integer          // 值为 3
    @param list: List               // 根据客服 id 筛选的访问者列表
    @param history: List            // 根据客服 id 和 访问者名称查找的历史会话
    @param visitor: VisitorInfo     // 根据点击访客查找的访客信息
    @param sd: Session              // session 数据
    @param customer: CustomerInfo   // 顾客信息
    @param tag: Tag                 // 顾客标签
-->
<div class="row no-gutters chat-block" th:fragment="index(status,list,history,visitor,sd,customer,tag)" th:if="${status} eq 3">

    <!-- begin::chat sidebar -->
    <div class="col-lg-3 chat-sidebar border-right">

        <!-- begin::chat sidebar search -->
        <div class="chat-sidebar-header">
            <form>
                <div class="input-group">
                    <input id="query" type="text" class="form-control" placeholder="Chat search"
                           aria-describedby="button-addon1">
                    <div class="input-group-append">
                        <button class="btn btn-outline-light" type="button" id="searchSession">
                            <i class="ti-search"></i>
                        </button>
                    </div>
                </div>
            </form>
        </div>
        <!-- begin::chat sidebar search -->

        <!-- end::chat list -->
        <div class="chat-sidebar-content">
            <ul class="nav nav-tabs" role="tablist">
                <li class="nav-item">
                    <a class="nav-link active" id="pills-home-tab" data-toggle="pill" href="#pills-home"
                       role="tab" aria-controls="pills-home" aria-selected="true">History</a>
                </li>
            </ul>
            <div class="tab-content pt-3 p-b-120">
                <div id="pills-home" class="tab-pane fade show active innerbox" role="tabpanel" aria-labelledby="pills-home-tab">
                    <p class="small mb-0">History chats</p>
                    <div class="chat-lists">
                        <div class="list-group scroll-pane list-group-flush">
                            <a th:each="item : ${list}" th:href="@{/chatHistory/historyAndData(id=(${item}==null ? '':${item.sessionid}))}" class="visitor active list-group-item d-flex align-items-center pb-3 pt-3">
                                <div class="pr-3">
                                    <span class="avatar avatar-sm">
                                        <span class="avatar-title bg-primary-gradient rounded-circle" th:text="(${item}==null? '123':${item.visitorname})">D</span>
                                    </span>
                                </div>
                                <div>
                                    <h6 class="mb-1" th:text="${item}==null? '':${item.visitorname}">Dudley Laborde</h6>
                                    <span class="small " th:style="(${item}==null ? '': ${item.active})?'color: green;':'color: grey'" th:text="(${item}==null ? '': ${item.active}) ? '在线':'离线'">Hello how are you?</span>
                                </div>
                                <div class="text-right ml-auto">
                                    <span class="small text-muted" th:text="(${item}==null?'13':${#dates.format(item.finishtime,'yyyy-MM-dd HH:mm')})">2:32 PM</span>
                                </div>
                            </a>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <!-- end::chat list -->

    </div>
    <!-- end::chat sidebar -->

    <!-- begin::chat content -->
    <div class="col-lg-6 chat-content pr-4">

        <!-- begin::chat header -->
        <div class="chat-header border-bottom">
            <div class="d-flex align-items-center">
                <div class="pr-3">
                    <div class="avatar avatar-sm ">
                        <img src="assets/media/image/photo1.jpg" class="rounded-circle" >
                    </div>
                </div>
                <div>
                    <h6 class="mb-1" th:text="(${visitor} != null) ? ${visitor.visitorname}:''">Customer Service</h6>
                </div>
                <div class="ml-auto">
                    <ul class="nav align-items-center">
                        <li class="mr-4 d-sm-inline d-none">
                            <a type="button" data-target="#worker-compose" data-toggle="modal" class="btn btn-outline-primary">
                                <i class="ti-plus mr-2"></i>创建工单
                            </a>
                        </li>
<!--                        <li class="mr-4 d-sm-inline d-none" data-toggle="modal" th:data-target="(${sd} != null)?'#inblack':''">-->
<!--                            <a data-toggle="tooltip" class="btn btn-outline-primary">-->
<!--                                <i class="ti-alert mr-2"></i>拉黑-->
<!--                            </a>-->
<!--                        </li>-->
                        <!-- dialog -->
                        <div class="modal fade" tabindex="-1" role="dialog" id="inblack">
                            <div class="modal-dialog modal-dialog-centered" role="document">
                                <div class="modal-content">
                                    <div class="modal-header">
                                        <h5 class="modal-title">提示</h5>
                                        <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                                            <span aria-hidden="true">×</span>
                                        </button>
                                    </div>
                                    <div class="modal-body">
                                        <form action="">
                                            <div class="form-group row">
                                                <lable for="reason" class="text-center col-md-3 col-form-label">拉黑原因:</lable>
                                                <div class="col-md-9">
                                                    <textarea id="reason" class="border border-primary form-control-plaintext"></textarea>
                                                </div>
                                            </div>
                                        </form>
                                    </div>
                                    <div class="modal-footer">
                                        <button type="button" class="btn btn-secondary" data-dismiss="modal">关闭</button>
                                        <button type="button" class="btn btn-primary" data-dismiss="modal">确定</button>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <li class="d-sm-inline d-none" style="margin-left: 0px;">
                            <a th:href="@{/session-message/get(id=((${sd}==null) ? '':${sd.sessionid}))}" data-toggle="tooltip" class="btn btn-outline-primary">
                                <i class="ti-share mr-2"></i>发起会话
                            </a>
                        </li>
                    </ul>
                </div>
            </div>
        </div>
        <!-- end::chat header -->

        <!-- begin::messages -->
        <div class="messages innerbox">
            <div class="message-item" th:each="item:${history}" th:classappend="${item.fromvisitor}?'':'me'">
                <div class="message-item-content" th:text="${item.content}">Hi!</div>
                <span class="time small text-muted font-italic" th:text="${#dates.format(item.sendtime,'yyyy-MM-dd HH:mm')}">02:30 PM</span>
            </div>
        </div>
        <!-- end::messages -->
    </div>
    <!-- begin::chat content -->

    <!-- begin::chat sidebar -->
    <div class="col-lg-3 chat-sidebar border-left" style="padding-right: 0px; padding-left: 1.5rem">

        <!-- end::chat customerInfo -->
        <div class="chat-sidebar-content">
            <ul class="nav nav-tabs" role="tablist">
                <li class="nav-item">
                    <a class="nav-link active" data-toggle="pill" href="#data"
                       role="tab" aria-controls="pills-home" aria-selected="true">资料</a>
                </li>
                <li class="nav-item">
                    <a class="nav-link" id="pills-profile-tab" data-toggle="pill" href="#sessionData"
                       role="tab" aria-controls="pills-profile" aria-selected="false">会话数据</a>
                </li>
            </ul>
            <div class="tab-content pt-3 p-b-35">
                <div class="tab-pane fade show active innerbox" style="overflow-x: hidden" id="data" role="tabpanel"
                     aria-labelledby="pills-home-tab">
                    <p class="small mb-0">访客信息</p>
                    <div class="row">
                        <div class="col-md-12 col-lg-12 col-sm-12">
                            <form>
                                <div class="form-group row">
                                    <label class="col-sm-4 col-form-label" style="text-align: right">IP地址</label>
                                    <div class="col-sm-8">
                                        <input type="text" readonly class="form-control-plaintext" th:value="(${visitor}==null)?'':${visitor.ip}">
                                    </div>
                                </div>
                                <div class="form-group row">
                                    <label class="col-sm-4 col-form-label" style="text-align: right">访问方式</label>
                                    <div class="col-sm-8">
                                        <input type="text" readonly class="form-control-plaintext" th:value="(${visitor}==null)?'':${visitor.terminal}">
                                    </div>
                                </div>
                                <div class="form-group row">
                                    <label class="col-sm-4 col-form-label" style="text-align: right">浏览器</label>
                                    <div class="col-sm-8">
                                        <input type="text" readonly class="form-control-plaintext" th:value="(${visitor}==null)?'':${visitor.browser}">
                                    </div>
                                </div>
                                <div class="form-group row">
                                    <label class="col-sm-4 col-form-label" style="text-align: right">屏幕尺寸</label>
                                    <div class="col-sm-8">
                                        <input type="text" readonly class="form-control-plaintext" th:value="(${visitor}==null)?'':${visitor.screensize}">
                                    </div>
                                </div>
                                <div class="form-group row">
                                    <label class="col-sm-4 col-form-label" style="text-align: right">设备</label>
                                    <div class="col-sm-8">
                                        <input type="text" readonly class="form-control-plaintext" th:value="(${visitor}==null)?'':${visitor.device}">
                                    </div>
                                </div>
                            </form>
                        </div>
                    </div>
                    <p class="small mb-0">客户信息</p>
                    <div class="row">
                        <div class="col-md-12 col-lg-12 col-sm-12">
                            <form>
                                <div class="form-group row">
                                    <label class="col-sm-4 col-form-label" style="text-align: right">客户名</label>
                                    <div class="col-sm-8">
                                        <input type="text" readonly class="form-control-plaintext" th:value="(${customer}==null)?'':${customer.customername}">
                                    </div>
                                </div>
                                <div class="form-group row">
                                    <label class="col-sm-4 col-form-label" style="text-align: right">真实姓名</label>
                                    <div class="col-sm-8">
                                        <input type="text" readonly class="form-control-plaintext" th:value="(${customer}==null)?'':${customer.realname}">
                                    </div>
                                </div>
                                <div class="form-group row">
                                    <label class="col-sm-4 col-form-label" style="text-align: right">客户电话</label>
                                    <div class="col-sm-8">
                                        <input type="text" readonly class="form-control-plaintext" th:value="(${customer}==null)?'':${customer.phone}">
                                    </div>
                                </div>
                                <div class="form-group row">
                                    <label class="col-sm-4 col-form-label" style="text-align: right">客户邮件</label>
                                    <div class="col-sm-8">
                                        <input type="text" readonly class="form-control-plaintext" th:value="(${customer}==null)?'':${customer.email}">
                                    </div>
                                </div>
                                <div class="form-group row">
                                    <label class="col-sm-4 col-form-label" style="text-align: right">客户公司</label>
                                    <div class="col-sm-8">
                                        <input type="text" readonly class="form-control-plaintext" th:value="(${customer}==null)?'':${customer.company}">
                                    </div>
                                </div>
                                <div class="form-group row">
                                    <label class="col-sm-4 col-form-label" style="text-align: right">客户地址</label>
                                    <div class="col-sm-8">
                                        <input type="text" readonly class="form-control-plaintext" th:value="(${customer}==null)?'':${customer.address}">
                                    </div>
                                </div>
                                <div class="form-group row">
                                    <label class="col-sm-4 col-form-label" style="text-align: right">客户等级</label>
                                    <div class="col-sm-8">
                                        <input type="text" readonly class="form-control-plaintext" th:value="(${customer}==null)?'':${customer.level}">
                                    </div>
                                </div>
                                <div class="form-group row">
                                    <label class="col-sm-4 col-form-label" style="text-align: right">客户来源</label>
                                    <div class="col-sm-8">
                                        <input type="text" readonly class="form-control-plaintext" th:value="(${customer}==null)?'':${customer.channel}">
                                    </div>
                                </div>
                                <div class="form-group row">
                                    <label class="col-sm-4 col-form-label" style="text-align: right">客户备注</label>
                                    <div class="col-sm-8">
                                        <input type="text" readonly class="form-control-plaintext" th:value="(${customer}==null)?'':${customer.remark}">
                                    </div>
                                </div>
                                <div class="form-group row">
                                    <label class="col-sm-4 col-form-label" style="text-align: right">客户标签</label>
                                    <div class="col-sm-8 pr-5">
                                        <div th:if="(${tag}!=null)" readonly class="btn btn-sm btn-secondary" th:text="(${tag}==null)?'':${tag.tagname}" th:style="'background-color:' + ((${tag}==null) ? 'white':${tag.color})"></div>
                                    </div>
                                </div>
                            </form>
                        </div>
                    </div>
                </div>
                <div class="tab-pane fade" style="overflow-x: hidden" id="sessionData" role="tabpanel"
                     aria-labelledby="pills-profile-tab">
                    <p class="small mb-0">基础数据</p>
                    <div class="row">
                        <div class="col-md-12 col-lg-12 col-sm-12">
                            <form>
                                <div class="form-group row">
                                    <label class="col-sm-4 col-form-label" style="text-align: right">创建时间</label>
                                    <div class="col-sm-8">
                                        <input type="text" readonly class="form-control-plaintext" th:value="(${sd}==null)?'':${#dates.format(sd.createtime,'yyyy-MM-dd HH:mm')}">
                                    </div>
                                </div>
                                <div class="form-group row">
                                    <label class="col-sm-4 col-form-label" style="text-align: right">结束时间</label>
                                    <div class="col-sm-8">
                                        <input type="text" readonly class="form-control-plaintext" th:value="(${sd}==null)?'':${#dates.format(sd.finishtime,'yyyy-MM-dd HH:mm')}">
                                    </div>
                                </div>
                                <div class="form-group row">
                                    <label class="col-sm-4 col-form-label" style="text-align: right">顾客消息数</label>
                                    <div class="col-sm-8">
                                        <input type="text" readonly class="form-control-plaintext" th:value="(${sd}==null)?'':${sd.customermsgnum}">
                                    </div>
                                </div>
                                <div class="form-group row">
                                    <label class="col-sm-4 col-form-label" style="text-align: right">客服消息数</label>
                                    <div class="col-sm-8">
                                        <input type="text" readonly class="form-control-plaintext" th:value="(${sd}==null)?'':${sd.customerservicemsgnum}">
                                    </div>
                                </div>
                            </form>
                        </div>
                    </div>
                    <p class="small mb-0">评价</p>
                    <div class="row">
                        <div class="col-md-12 col-lg-12 col-sm-12">
                            <form>
                                <div class="form-group row">
                                    <label class="col-sm-4 col-form-label" style="text-align: right">评价时间</label>
                                    <div class="col-sm-8">
                                        <input type="text" readonly class="form-control-plaintext" th:value="(${sd}==null)?'':${#dates.format(sd.evaluationtime,'yyyy-MM-dd HH:mm')}">
                                    </div>
                                </div>
                                <div class="form-group row">
                                    <label class="col-sm-4 col-form-label" style="text-align: right">评价类型</label>
                                    <div class="col-sm-8">
                                        <input type="text" readonly class="form-control-plaintext" th:value="(${sd}==null)?'':${sd.evaluation}">
                                    </div>
                                </div>
                                <div class="form-group row">
                                    <label class="col-sm-4 col-form-label" style="text-align: right">评价详情</label>
                                    <div class="col-sm-8">
                                        <input type="text" readonly class="form-control-plaintext" th:value="(${sd}==null)?'':${sd.evaluationdetail}">
                                    </div>
                                </div>
                            </form>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <!-- end::chat list -->

    </div>
    <!-- end::chat customerInfo -->

</div>

</body>
</html>